<template>
    <div class="user_auth">
        <van-nav-bar title="实名认证" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="con">
            <div>
                <van-cell-group>
                    <van-field required clearable label="用户名" placeholder="请输入用户名" />
                    <van-field label="身份证号码" placeholder="请输入与身份证号码" required />
                </van-cell-group>
            </div>
            <div class="wrap">
                <h3>上传证件照</h3>
                <div class="parent">
                    <div class="item">
                        <van-uploader :after-read="onRead">
                            <div class="inner-box">
                                <i class="zx-icon">&#xe71c;</i>
                                <!--<img src="/img/person3.jpg" alt="">-->
                            </div>
                        </van-uploader>
                        <p>身份证正面</p>

                    </div>
                    <div class="item">
                        <van-uploader :after-read="onRead">
                            <div class="inner-box">
                                <i class="zx-icon">&#xe71c;</i>
                                <!--<img src="/img/person3.jpg" alt="">-->
                            </div>
                        </van-uploader>
                        <p>身份证反面</p>

                    </div>
                    <div class="item">
                        <van-uploader :after-read="onRead">
                            <div class="inner-box">
                                <i class="zx-icon">&#xe721;</i>
                                <!--<img src="/img/person3.jpg" alt="">-->
                            </div>
                        </van-uploader>

                        <p>手持正面</p>
                    </div>
                </div>

            </div>
            <div class="text">
                <p><span>1.&nbsp;&nbsp;</span><em>请上传清晰的身份证正反面和手持身份证正面照片</em></p>
                <p><span>2.&nbsp;&nbsp; </span><em>图片需清晰、完整、方向正确、不能带有无关的水印或者标记其他网站的logo</em></p>
                <p><span>3.&nbsp;&nbsp; </span><em>图片大小不能超过3M</em></p>
            </div>
            <div class="button"><van-button type="default">提交认证</van-button></div>
            <p class="bottom_text">我们会对您的资料进行隐私保护，绝不对外公开</p>
        </div>

    </div>
</template>

<script>
    import {
        Field,
        Cell,
        CellGroup,
        Uploader,
        Button
    } from "vant";
    import Vue from "vue";
    Vue.use(Field);
    Vue.use(Cell);
    Vue.use(CellGroup);
    Vue.use(Uploader);
    Vue.use(Button);
    export default {
        methods: {
            onRead(){

            },
            onClickLeft() {
                history.back();
            }
        },
        created() {
            document.body.style.backgroundColor = "rgb(239, 243, 246)";
        }
    };
</script>

<style lang="less" scoped>
@import "../../public/css/user_auth.less";
</style>
